<template>
  <view class="page">
    <view class="group_2">
      <view class="box_2">
        <view class="image-text_1">
          <image
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152493427551228.png"
            mode="aspectFill"
            class="thumbnail_4"
          ></image>
          <text lines="1" decode="true" class="text-group_1"
            >花费&nbsp;{{
              selfInfo.UserType == "普通用户"
                ? needUseScore.Score
                : needUseScore.VIP_Score
            }}&nbsp;挥豆，可获得平台专人对接，尽快把您的信息送达给对方，100%获得答复。如果对方拒绝与您联系，将退还{{
              selfInfo.UserType == "普通用户"
                ? needUseScore.Score
                : needUseScore.VIP_Score
            }}&nbsp;挥豆，请保持电话通畅～</text
          >
        </view>
      </view>
      <view class="box_3">
        <view class="image-text_2">
          <image
            :src="resData.UserImgs"
            class="label_1"
            mode="aspectFill"
          ></image>
          <view class="text-group_2">
            <text lines="1" class="textBaseC hiddenText diyWidth">{{
              $util.entitiesToUtf16(resData.Name)
            }}</text>
            <text lines="1" decode="true" class="textBaseC text_4"
              >{{resData.Birthday ? getYearStr(resData.Birthday) + "后｜": "未知 | "}}{{ resData.City }}</text
            >
          </view>
        </view>
      </view>
      <view class="box_4">
        <text lines="1" class="text_6">联系需求</text>
        <view class="text-wrapper_1">
          <textarea
            @input="inputContent"
            maxlength="200"
            class="paragraph_1"
            placeholder-class="paragraph_plac"
            placeholder="请详细描述您的联系需求，平台客服会尽快将信息送达给对方，并获得对方反馈。(禁止任何色情信息，否则审核不通过)"
          ></textarea>
          <text
            class="numText"
            :class="{ numTextColor: sayContent.length == 200 }"
            >{{ sayContent.length }}/200</text
          >
        </view>
      </view>
      <view class="box_5">
        <view class="section_1">
          <text lines="1" class="text_7">我的联系方式</text>
        </view>
        <view class="text-wrapper_2">
          <text lines="1" class="textBaseItem">联系人：</text>
          <text
            lines="1"
            class="myContactText"
            :class="{ nullColor: !selfInfo.Name }"
            >{{ $util.entitiesToUtf16(selfInfo.Name) }}</text
          >
        </view>
        <view class="text-wrapper_2">
          <text lines="1" class="textBaseItem">手机号：</text>
          <text
            lines="1"
            class="myContactText"
            :class="{ nullColor: !selfInfo.Phone }"
            v-if="!isFix && isShow"
            >{{ selfInfo.Phone }}</text
          >
          <input
            class="myContact"
            type="text"
            v-model="selfInfo.Phone"
            placeholder-class="inputClass"
            placeholder="请输入您的手机号"
            v-else
          />
          <!-- #ifdef MP-WEIXIN -->
          <button
            class="s_btn"
            open-type="getPhoneNumber"
            @getphonenumber="getNums"
          >
            获取
          </button>
          <!-- #endif -->
        </view>
        <view class="text-wrapper_2">
          <text lines="1" class="textBaseItem">微信号：</text>
          <text
            lines="1"
            class="myContactText"
            :class="{ nullColor: !selfInfo.WechatNo }"
            v-if="!isFix && isShow"
            >{{ selfInfo.WechatNo }}</text
          >
          <input
            class="myContact"
            type="text"
            v-model="selfInfo.WechatNo"
            placeholder-class="inputClass"
            placeholder="请输入您的微信号"
            v-else
          />
        </view>
      </view>
      <view class="box_6">
        <view class="group_3">
          <view class="block_1">
            <view class="box_7">
              <view class="block_2">
                <text
                  lines="1"
                  class="textBase text_16"
                  v-if="needUseScore.IsPromotion == 1"
                  >{{ needUseScore.Promotion }}</text
                >
                <text lines="1" class="textBase text_16" v-else>{{
                  selfInfo.UserType == "普通用户"
                    ? needUseScore.Score
                    : needUseScore.VIP_Score
                }}</text>
                <text lines="1" class="textBase text_17">挥豆</text>
                <view
                  class="text-wrapper_6"
                  v-if="selfInfo.UserType == '普通用户'"
                >
                  <text
                    @click="nav_to('/pages/user/apply_member')"
                    lines="1"
                    decode="true"
                    class="text_18"
                    >开通会员仅需&nbsp;{{
                      needUseScore.VIP_Score
                    }}&nbsp;挥豆&gt;&gt;</text
                  >
                </view>
              </view>
              <text lines="1" decode="true" class="text_19"
                >剩余：{{ userScore }}&nbsp;挥豆</text
              >
            </view>
            <view class="text-wrapper_7" @click="submitInfo">
              <text lines="1" class="text_20">确认提交</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      resData: {},
      selfInfo: {},
      isFix: false,
      FriendID: "",
      sayContent: "",
      userScore: "",
      needUseScore: "",
      isShow: true,
      System:'', 
    };
  },
  onLoad(e) {
    this.FriendID = e?.id;
    this.getUserInfo(e?.id);
    this.getHuiDouPrice();
    this.isShowFn();
    this.System = uni.getStorageSync('System')
  },
  onShow() {
    this.selfInfo = uni.getStorageSync("user");
    this.userScore = this.selfInfo.AccountInfo.Score;
  },
  methods: {
    isShowFn() {
      if (!(this.selfInfo.Phone && this.selfInfo.WechatNo)) {
        this.isShow = false;
      }
    },
    inputContent(e) {
      let strC = e.target.value;
      if (strC.length > 200) {
        strC = strC.slice(0, 200);
      }
      this.sayContent = this.$util.entitiesToUtf16(strC);
    },
    async getUserInfo(id) {
      let res = await this.$api.post("User/GetUserInfo", {
        ID: id,
      });
      if (res.code == 0) {
        this.resData = res.data;
      }
    },
    checkInfo() {
      // console.log(this.System,'System');
      if (!this.selfInfo.Phone) {
        this.$pv.msg("请输入手机号");
        this.isFix = true;
        return false;
      } else if (!this.selfInfo.WechatNo) {
        this.$pv.msg("请输入微信号");
        this.isFix = true;
        return false;
      }else if(this.selfInfo.UserType == "普通用户"){
        if(this.userScore<this.needUseScore.Score){
          uni.showModal({
							title: '温馨提示',
							content: '您挥豆不足',
							confirmText: "确定",
							success: async (res) => {
								if (res.confirm) {
                  if(this.System == 'ios'){
                    
                  }else{
                    this.nav_to('/pages/user/payHuiDou')
                  }
									
									return
								} else if (res.cancel) {

								}
							}
						});
          return false;
        }
        return true
      } else if(this.selfInfo.UserType != "普通用户") {
        if(this.userScore<this.needUseScore.VIP_Score){
          uni.showModal({
							title: '温馨提示',
							content: '您挥豆不足',
							confirmText: "确定",
							success: async (res) => {
								if (res.confirm) {
									if(this.System == 'ios'){
                    
                  }else{
                    this.nav_to('/pages/user/payHuiDou')
                  }
									return
								} else if (res.cancel) {

								}
							}
						});
          return false;
        }
        return true
      } else {
        return true;
      }
    },
    async submitInfo() {
      if (!this.checkInfo()) return;

      if (!this.$util.checkPhone(this.selfInfo.Phone)) {
        this.$pv.msg("手机号各式不正确！");
        return;
      }
      let str = this.$util.utf16ToEntities(this.sayContent);
      if (str.length > 200) {
        str = str.slice(0, 200);
      }
      uni.showModal({
        title: "温馨提示",
        content: `平台审核通过后将消耗${
          this.selfInfo.UserType == "普通用户"
            ? this.needUseScore.Score
            : this.needUseScore.VIP_Score
        }挥豆`,
        success: async (res) => {
          if (res.confirm) {
            let res = await this.$api.post("Friend/Add", {
              FriendID: this.FriendID,
              Remark: str,
              Phone: this.selfInfo.Phone,
              Fee:
                this.selfInfo.UserType == "普通用户"
                  ? this.needUseScore.Score
                  : this.needUseScore.VIP_Score,
              WechatNo: this.selfInfo.WechatNo,
            });

            if (res.code == 0) {
              uni.showToast({
                title: "提交成功",
                duration: 2000,
                icon: "success",
              });
              setTimeout(() => {
                uni.redirectTo({
                  url: "/pages/user/contactManager",
                });
              }, 1500);
            } else {
              //console.log(res.message);
              uni.showToast({
                title: res.message,
                duration: 2000,
                icon: "error",
              });
            }
          }
        },
      });
    },
    async getHuiDouPrice() {
      let res = await this.$api.post("Common/GetServerPrice", {
        Item: "极速联系",
      });
      if (res.code == 0) {
        this.needUseScore = res.data;
      }
    },
    getNums(e) {
      let _this = this;

      uni.login({
        provider: "weixin",
        success: async (res) => {
          let d = {
            encryptedData: e.detail.encryptedData,
            code: res.code,
            aesIv: e.detail.iv,
          };
          let res3 = await _this.$api.post("User/GetPhoneNumber", d);
          if (res3.data) {
            _this.selfInfo.Phone = res3.data;
            _this.$pv.msg("获取成功")
            return
          }
          _this.$pv.msg("获取失败")
        },
      });
    },
  },
};
</script>

<style lang="scss">
.page {
  background-color: rgba(246, 246, 246, 1);
  position: relative;
  width: 750rpx;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .group_2 {
    display: flex;
    flex-direction: column;
    .box_2 {
      background-color: rgba(253, 249, 237, 1);
      display: flex;
      flex-direction: row;
      padding: 16rpx 24rpx 16rpx 24rpx;
      .image-text_1 {
        width: 652rpx;
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        .thumbnail_4 {
          width: 36rpx;
          height: 36rpx;
          margin: 30rpx 20rpx 30rpx 0;
        }
        .text-group_1 {
          width: 650rpx;
          height: 96rpx;
          overflow-wrap: break-word;
          color: rgba(229, 100, 48, 1);
          font-size: 24rpx;
          letter-spacing: 1rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          text-align: left;
          line-height: 32rpx;
        }
      }
    }
    .box_3 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16rpx;
      width: 652rpx;
      align-self: center;
      margin-top: 24rpx;
      flex-direction: row;
      display: flex;
      justify-content: space-between;
      padding: 32rpx 24rpx 32rpx 24rpx;
      .image-text_2 {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        .label_1 {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
        }
        .text-group_2 {
          display: flex;
          flex-direction: column;
          margin: 8rpx 0 10rpx 0;
          margin-left: 20rpx;
          .textBaseC {
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-family: PingFang-SC-Bold;
            font-size: 28rpx;
            font-weight: Bold;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
            margin-right: 30rpx;
          }
          .text_4 {
            font-size: 24rpx;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            line-height: 34rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
    .box_4 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16rpx;
      width: 652rpx;
      align-self: center;
      margin-top: 16rpx;
      display: flex;
      flex-direction: column;
      padding: 24rpx 24rpx 24rpx 24rpx;
      .text_6 {
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 28rpx;
        font-family: PingFang-SC-Bold;
        font-weight: Bold;
        text-align: left;
        white-space: nowrap;
        line-height: 40rpx;
        margin-right: 542rpx;
      }
      .text-wrapper_1 {
        background-color: rgba(247, 248, 250, 1);
        border-radius: 16rpx;
        margin-top: 5rpx;
        display: flex;
        flex-direction: column;
        padding: 24rpx;
        position: relative;
        .numText {
          font-size: 28rpx;
          color: #999999;
          position: absolute;
          right: 15rpx;
          bottom: 15rpx;
        }
        .numTextColor {
          color: red;
        }
        .paragraph_1 {
          width: 500rpx;
          height: 246rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 28rpx;
          letter-spacing: 4rpx;
          // font-family: PingFang-SC-Medium;
          font-weight: 400;
          text-align: left;
          line-height: 40rpx;
        }
        /deep/.paragraph_plac {
          // width: 600rpx;
          // height: 142rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 28rpx;
          letter-spacing: 4rpx;
          // font-family: PingFang-SC-Medium;
          font-weight: 400;
          text-align: left;
          line-height: 40rpx;
          box-sizing: border-box;
        }
      }
    }
    .box_5 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16rpx;
      align-self: center;
      margin-top: 16rpx;
      width: 652rpx;
      display: flex;
      flex-direction: column;
      padding: 24rpx 24rpx 24rpx 24rpx;
      .section_1 {
        width: 654rpx;
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
        .text_7 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          font-family: PingFang-SC-Bold;
          font-weight: Bold;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
        }
        .image-text_3 {
          width: 76rpx;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
          .text-group_3 {
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 24rpx;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            text-align: center;
            white-space: nowrap;
            line-height: 34rpx;
          }
        }
      }
      .text-wrapper_2 {
        flex-direction: row;
        display: flex;
        align-items: center;
        .textBaseItem {
          overflow-wrap: break-word;
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
        }
        .myContactText {
          height: 50rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
        }
        .inputClass {
          font-size: 28rpx;
          display: flex;
          align-items: center;
          color: rgb(245, 78, 78);
        }
        .s_btn {
          color: #fff;
          font-size: 24rpx;
          height: 50rpx;
          border-radius: 30rpx;
          background-color: #706eee;
          padding: 0 40rpx;
          display: flex;
          align-items: center;
          margin-left: auto;
        }
      }
    }
    .box_6 {
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 0;
      .group_3 {
        background-color: rgba(255, 255, 255, 1);
        padding-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        .block_1 {
          width: 682rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          margin: 18rpx 32rpx 0 36rpx;
          .box_7 {
            display: flex;
            flex-direction: column;
            .block_2 {
              width: 360rpx;
              flex-direction: row;
              display: flex;
              .textBase {
                overflow-wrap: break-word;
                color: rgba(112, 110, 238, 1);
                font-family: PingFang-SC-Bold;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
              }
              .text_16 {
                font-size: 42rpx;
              }
              .text_17 {
                font-size: 32rpx;
                display: flex;
                align-items: center;
                margin-left: 10rpx;
              }
              .text-wrapper_6 {
                background-color: rgba(252, 226, 178, 1);
                border-radius: 14rpx;
                display: flex;
                align-items: center;
                height: 30rpx;
                margin-left: 10rpx;
                padding: 10rpx 14rpx;
                .text_18 {
                  overflow-wrap: break-word;
                  color: rgba(80, 59, 22, 1);
                  font-size: 18rpx;
                  font-family: PingFang-SC-Bold;
                  font-weight: normal;
                  text-align: left;
                  white-space: nowrap;
                }
              }
            }
            .text_19 {
              overflow-wrap: break-word;
              color: rgba(153, 153, 153, 1);
              font-size: 24rpx;
              font-family: PingFang-SC-Medium;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 34rpx;
              margin: -4rpx 216rpx 0 0;
            }
          }
          .text-wrapper_7 {
            background-color: rgba(112, 110, 238, 1);
            border-radius: 46rpx;
            display: flex;
            flex-direction: column;
            padding: 20rpx 80rpx;
            .text_20 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 32rpx;
              font-family: PingFang-SC-Bold;
              font-weight: normal;
              text-align: right;
              white-space: nowrap;
              line-height: 52rpx;
            }
          }
        }
      }
    }
  }
}

.myContact {
  font-size: 28rpx;
  height: 50rpx;
  color: #666666;
}
.okColor {
  color: rgb(38, 181, 237);
}
.nullColor {
  color: gray;
}
</style>